<template>
    <el-dialog :close-on-click-modal="false" :title="'捷导航栏配置'" v-model="open" append-to-body width="75%"
        @close="ShortcutNavigationClose">
        <div style="height: 460px;overflow: auto">
            <el-row>
                <el-col v-if="menuList.length > 0 && menuList[0].icon" :span="4" v-for="(item, index) in menuList">
                    <el-checkbox-group v-model="checkList">
                        <div :key="index" class="fast-item" style="width: 220px;" @click="clickItem(item)">
                            <el-card style="height: 100%;">
                                <i :class="item.icon" :style="{ color: getMenuColor(index) }" class="iconfont"></i>
                                <el-checkbox :label="item.menuId">
                                    <svg-icon class="svg-icon-nav" :icon-class="item.icon" />
                                    <span class="span" @click="clickItem(item)">{{ item.menuName }}</span>
                                </el-checkbox>
                            </el-card>
                        </div>

                    </el-checkbox-group>
                </el-col>
                <el-col v-else>
                    暂无数据
                </el-col>
            </el-row>
        </div>
        <div style="margin: 5px 5px;float: right">
            <el-button style="" type="success" @click="shortcutNavigationSave()">
                <template #icon><i-ep-documentAdd /></template>
                保存
            </el-button>
            <el-button icon="el-icon-bangzhu" style="" type="info" @click="close()">
                关闭
            </el-button>
        </div>
    </el-dialog>
</template>

<script lang="ts" setup>
import { getUserRouters } from '@/api/system/menu'
import { getShortcutNavigation, shortcutNavigation } from "@/api/welcomeApi"
import { useRouter } from "vue-router"
import { useUserStoreHook } from "@/store/modules/user"

const useUserStore = useUserStoreHook()
const router = useRouter()

const userId: Ref<string> = ref(useUserStore.user.userInfo.userId)
let open: Ref<boolean> = ref(false)
let menuList: Ref<any[]> = ref([])
let checkList: Ref<any[]> = ref([])
let checkListObj: Ref<any[]> = ref([{}])
const colorList = reactive(["#5584fd", "#3470ff", "#ff8801", "#00d6b9", "#7e3bf3"])

const getUserCacheMenu = () => {
    let check: any[] = []

    getShortcutNavigation(userId.value).then(res => {
        if (res.data) {
            res.data.forEach(item => {
                // @ts-ignore
                checkList.value.push(item.menuId)
                check.push(item)
            })
            checkListObj.value = check
        }
    })


}
const getList = () => {
    let data = {
        userId: userId.value
    }
    getUserRouters(data).then(res => {
        menuList.value = res.data
    })
}
const init = () => {
    getList()
    getUserCacheMenu()
    open.value = true
}
const ShortcutNavigationClose = () => {
    open.value = false
}
const onChooseItem = (item) => {
    router.push({
        path: item.path,
    });
}
const getMenuColor = (index) => {
    return colorList[index % 4];
}
const clickItem = (obj) => {
    let check: any[] = []
    let checkIndex = checkList.value.findIndex(item => {
        return item === obj.menuId
    })
    if (checkIndex >= 0) {
        checkList.value.splice(checkIndex, 1);
        checkListObj.value.splice(checkIndex, 1);
    } else {
        checkList.value.push(obj.menuId)
        checkListObj.value.push(obj)
    }
}

const emits = defineEmits(["refreshParent"])
const shortcutNavigationSave = () => {
    let obj = {
        userId: userId.value,
        checkListObj: checkListObj.value
    }
    shortcutNavigation(obj).then(res => {
        ElMessage.success(res["msg"])
        close()
        emits("refreshParent")
    })
}
const close = () => {
    open.value = false
    menuList.value = []
    checkList.value = []
    checkListObj.value = []
}
defineExpose({
    init
})
</script>
<script lang="ts">

export default {
    name: "ShortcutNavigation"
}

</script>

<style lang="scss" scoped>
// .fast-item {}

::v-deep .el-card__body {
    padding: 10px 18px 8px 20px;
    margin-bottom: 11px;
}

.el-checkbox {
    margin-top: -11px;
}

::v-deep.is-always-shadow {
    height: 100%;
}

.span {
    margin-top: -8px;
    margin-left: 16px;
}

.svg-icon-nav {
    position: absolute;
    margin-top: -8px;
    margin-left: -4px;
}
</style>
